<template>
	<div class="wrapper">
		<van-nav-bar fixed title="提交订单" left-arrow @click-left="goBack"></van-nav-bar>
		<div class="has-top has-bottom-other">
			<div class="order-box w-100 plr-24 ptb-38 pos-r">
				<div class="order-bg w-100 pos-a top-0 left-0 right-0"></div>
				<!-- 房间信息 -->
				<div class="bg-white pt-22 plr-24 pb-40 flex pos-r br-12">
					<img-box class="is-200 br-12 flex-s-0" :img-url="orderData.imgList[0]" />
					<div class="flex-1 ml-26 ofh flex flex-d-c flex-s-fs">
						<div>
							<div class="fs-32 text-show-line-1 lh-44 color-dark mb-12">
								{{ orderData.ProductModel.ProductInfo.ProductName }}
							</div>
							<div class="flex fs-24 lh-34 color-gray-light">
								<span class="tag pr-20 pos-r" v-for="(item, index) in orderData.ProductModel.ProductInfo.TagsList"
									:key="index" v-if="orderData.ProductModel.ProductInfo.TagsList && index < 3">{{ item.Name }}</span>
							</div>
							<div class="color-primary mt-16 lh-34" v-if="ProductRoomList.length != 0">
								<svg-icon icon-class="finish" class="fs-28 color-primary mr-8" />
								{{ roomRemark ? roomRemark : ProductRoomList[0].Remark }}
							</div>
						</div>
						<div class="color-deep lh-xxs flex flex-s-fe mt-12">
							<div class="fs-32 ls-4">
								¥<span class="fs-44 ls-0">{{ orderData.ProductModel.ProductInfo.V_GradePrice }}</span>/{{
									orderData.ProductModel.ProductInfo.Unit }}
							</div>
						</div>
					</div>
				</div>
				<!-- 表单 -->
				<div class="bg-white pos-r br-16 mt-22">
					<div class="ptb-20 plr-24 flex flex-v-c bb-l">
						<img :src="require('@/assets/images/teaHouse/houseIcon.png')" class="is-48">
						<span class="fs-28 color-dark lh-48 ml-8">{{ orderData.StoreInfo.Name }}（{{ orderData.StoreInfo.StreetName
						}}）</span>
					</div>
					<div class="plr-24">
						<div class="flex flex-s-c ptb-22 bb-l" @click="showTime">
							<div class="flex flex-v-c dvt ">
								<div class="flex flex-d-c lh-22 color-gray">
									<div class="mb-6 fs-22">开始时间</div>
									<div class="fs-28 lh-42 color-dark">
										<span :class="param.bookEndTime1 === '请选择预定时间' ? 'color-gray-light' : ''">{{ param.bookStartTime1
										}}</span>
										<span class="color-gray-light fs-22">{{ bookStartDate }}</span>
									</div>
								</div>
								<div class="">
									<span class="pos-r bd-solid border-primary color-primary br-20 plr-24 dis-inb mlr-36 fs-26 line">{{
										duration }}h</span>
								</div>
								<div class="flex flex-d-c fs-22 lh-22 color-gray">
									<div class="mb-6">结束时间</div>
									<div class="fs-28 lh-42 color-dark mr-8 fs-22">
										<span :class="param.bookEndTime1 === '请选择预定时间' ? 'color-gray-light' : ''">{{ param.bookEndTime1
										}}</span>
										<span class="color-gray-light fs-22">{{ bookEndDate }}</span>
									</div>
								</div>
							</div>
							<div>
								<svg-icon icon-class="data" class="fs-28 color-dark" />
							</div>
						</div>
						<div class="flex flex-v-c pos-r arrow lh-100" @click="showHouse">
							<div class="fs-28 color-gray min-w">选择房间</div>
							<div class="flex-1 fs-32 color-dark">
								<span v-if="param.roomNo">{{ param.roomNo }} {{ param.roomName }}</span>
								<span v-else class="fs-28 color-gray-light">请选择房间</span>
							</div>
						</div>
					</div>
				</div>
				<!--<div class="bg-white pos-r br-16 mt-22">
					<div class="ptb-20 plr-24 flex flex-v-c bb-l">
						<span class="fs-28 color-dark lh-48 ml-8">预约信息</span>
					</div>
					<div class="plr-24">
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userName.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.userName.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<input v-model="param.userName" type="text"
									:placeholder="obj.userName.required ? '请输入' + obj.userName.Name + '（必填）' : '请输入' + obj.userName.Name">
							</div>
						</div>
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userIdentityCard.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.userIdentityCard.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<input v-model="param.userIdentityCard" type="text"
									:placeholder="obj.userIdentityCard.required ? '请输入' + obj.userIdentityCard.Name + '（必填）' : '请输入' + obj.userIdentityCard.Name">
							</div>
						</div>
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userTel.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.userTel.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<input v-model="param.userTel" type="number"
									:placeholder="obj.userTel.required ? '请输入' + obj.userTel.Name + '（必填）' : '请输入' + obj.userTel.Name">
							</div>
						</div>
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userCount.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.userCount.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<input v-model="param.userCount" type="number"
									:placeholder="obj.userCount.required ? '请输入' + obj.userCount.Name + '（必填）' : '请输入' + obj.userCount.Name">
							</div>
						</div>
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.estimateArrivalTime.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.estimateArrivalTime.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<span class="flex-1 fs-30" :class="param.estimateArrivalTime ? 'color-dark' : 'color-gray-light'"
									@click="param.timeSelect = true">{{ param.estimateArrivalTime ? param.estimateArrivalTime :
										obj.estimateArrivalTime.required ? '请输入' + obj.estimateArrivalTime.Name + '（必填）' :
											'请输入' + obj.estimateArrivalTime.Name }}</span>
								<van-popup v-model="param.timeSelect" position="bottom">
									<van-datetime-picker v-model="param.estimateArrivalTime" type="time" :min-hour="param.minHouse"
										:min-minute="param.minMinute" :title="param.bookStartTime1 + obj.estimateArrivalTime.Name"
										@change="changeSelect" @confirm="confirmTimeSelect" @cancel="cancelTimeSelect" />
								</van-popup>
							</div>
						</div>
						<div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.orderRemark.isShow">
							<div class="fs-28 color-gray min-w">{{ obj.orderRemark.Name }}</div>
							<div class="flex-1 fs-30 color-dark">
								<input v-model="param.orderRemark" type="text"
									:placeholder="obj.orderRemark.required ? '请输入' + obj.orderRemark.Name + '（必填）' : '请输入' + obj.orderRemark.Name">
							</div>
						</div>
					</div>
				</div>-->
				<div class="bg-white pos-r br-16 mt-22">
					<div class="ptb-20 plr-24 flex flex-v-c bb-l">
						<span class="fs-28 color-dark lh-48 ml-8">优惠信息</span>
					</div>
					<div class="bg-white pd-24 mg-24 br-16 travel fs-28" @click="openCouponList()">
						<div>优惠券</div>
						<div class="flex flex-v-c" v-if="userCouponList && userCouponList.length > 0">
							<div v-if="couponValue != 0">
								<span class="fs-28 color-primary1">-￥</span><span class="fs-36 color-primary1">{{ couponValue }}</span>
								<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goCoupon" />
							</div>
							<div v-else>选择优惠券 <svg-icon icon-class="right" class="fs-24 ml-10" /></div>
						</div>
						<div v-else class="color-black2">暂无优惠券<svg-icon icon-class="right" class="fs-24 ml-10" /></div>
					</div>
				</div>
				<div class="bg-white pos-r br-16 mt-22">
					<div class="ptb-20 plr-24 flex flex-v-c bb-l">
						<span class="fs-28 color-dark lh-48 ml-8">订单金额</span>
					</div>
					<div class="pd-24">

						<div class="flex flex-s-c lh-48 fs-28 color-dark">
							<span>付费时长</span>
							<span>共{{ duration }}小时</span>
						</div>
						<div class="flex flex-s-c lh-48 fs-28 color-dark">
							<span>时长费</span>
							<span>￥{{ param.roomPrice ? (param.roomPrice * 2).toFixed(2) : '0' }}/小时</span>
						</div>
						<div class="flex flex-s-c lh-48 fs-28 color-dark" v-if="couponValue != 0">
							<span>优惠券</span>
							<span class="color-deep">-￥{{ couponValue }}</span>
						</div>
						<div class="flex flex-fe-c lh-44 fs-32 color-dark fw-600 mt-24">
							<span>订单总额：￥{{ orderPrice ? orderPrice.toFixed(2) : "0" }}</span>
						</div>
					</div>
				</div>
				<div class="bg-white pos-r br-16 mt-22">
					<div class="item pd-25">
						<p class="fs-28 color-dark">买家留言(选填）</p>
						<van-field v-model="param.userRemark" type="textarea" class="fs-24 mt-15" placeholder="请在此处填写留言~" />
					</div>
				</div>
			</div>
			<div class="fixed-bottom">
				<div class="flex flex-fe-c ptb-20 plr-30 bg-white bottom-box">
					<div class="flex flex-d-c mr-40">
						<div class="fs-24 color-dark">
							合计：
							<span class="color-primary fs-40 fw-600">{{ orderPrice ? orderPrice.toFixed(2) : '0' }}</span>
							<span class="color-primary fs-20 ml-6">元</span>
						</div>
						<span class="flex-fe-c fs-24 color-gray-light lh-34 mt-4">{{ duration }}小时</span>
					</div>
					<button class="bg-primary color-white btn fs-32 lh-80 br-45" @click.stop="submitOrder">提交订单</button>
				</div>
			</div>
		</div>
		<!-- 选择房间弹窗 -->
		<van-action-sheet v-model="isShowHouse">
			<div class="pd-22 pr-20">
				<h6 class="fs-32 color-dark lh-44 pb-24 pt-16">选择房间</h6>
				<p class="fs-24 color-gray-light lh-34 mb-32">请选择您要预定的房间</p>
				<div class="flex flex-wrap">
					<div class="bg-ffgray plr-36 fs-24 color-black lh-70 mr-14 mb-12 br-8 "
						:class="item.flag ? 'active bd-solid border-primary' : ''" v-for="(item, index) in ProductRoomList"
						@click="roomChange(item)">
						<span :class="item.flag ? 'color-primary' : ''">{{ item.RoomNo }} {{ item.Name }}</span>
					</div>
				</div>
			</div>
		</van-action-sheet>

		<van-popup v-model="isShowTime" position="bottom" @close="cancleDate" class="dateTimeList">
			<div class="mb-144">
				<div class="pd-24 bookDayList">
					<div class="fs-28 flex flex-s-c"><span class="fw-b">日期选择</span> <span>{{ year }}</span></div>
					<li class="dateList mtb-24">
						<div v-for="(item, index) in dateList" :key="index" class="dates"
							:class="classActive == index ? 'dateActive' : ''" @click="dateClick(item, index)">
							<p class="fs-36">{{ item.dateStr }}</p>
							<p>{{ item.zhouji }}</p>
						</div>
					</li>
				</div>
				<div class="timeList plr-24">
					<button v-for="(item, index) in timeArr" :key="item.index" class="times" :disabled="item.state"
						:class="{ 'actives1': item.state, 'actives': startIndex <= item.index && item.index <= endIndex }"
						@click="tabClickPop(item, index)"
						v-if="dateList.length > 0 && Date.parse(dateList[classActive].date + ' ' + item.time) > nowTime">


						<p>{{ item.time }}</p>
					</button>
				</div>
			</div>
			<div class="submitBtn">
				<button class="bg-primary color-white fs-32 lh-80 br-44 yybtn" v-if="startIndex === -1">请选择开始时间</button>
				<button class="bg-primary color-white fs-32 lh-80 br-44 yybtn"
					v-if="startIndex !== -1 && endIndex === startIndex">请选择结束时间</button>
				<button class="bg-primary color-white fs-32 lh-80 br-44 yybtn" v-if="startIndex !== -1 && endIndex !== startIndex"
					@click="resetDate">立即预定</button>
			</div>

		</van-popup>
		<van-popup v-model="showCoupon" position="bottom">
			<div class="coupon-box">
				<h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
				<van-radio-group v-model="userCouponListRadio">
					<ul class="coupon-list mg-30 mb-0">
						<li v-for="(item, index) in userCouponList" :key="index" class="coupon-item mb-30 flex-s-c"
							@click="userCouponListRadio = index">
							<div class="item flex-s-c flex-1 br-12"
								:style="{ backgroundImage: 'url(' + require('@/assets/images/physio/coupon-li-bg.png') + ')' }">
								<div class="left-box  fs-72 flex-center ">
									<div v-show="item.V_PrivilegeWay !== 0" class="tac">
										<span>{{ parseInt(item.CouponPrivilegeValue) }}</span>
										<span v-show="item.CouponPrivilegeValue % 1" class="fs-24">{{ item.CouponPrivilegeValue ?
											item.CouponPrivilegeValue.toFixed(2) : '' }}</span>
										<span class="fs-24">元</span>
										<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
											item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
									</div>
									<div v-show="item.V_PrivilegeWay === 0" class="tac">
										<span>{{ parseInt(item.CouponPrivilegeValue / 10) }}</span>
										<span v-show="(item.CouponPrivilegeValue / 10) % 1" class="fs-24">.{{ item.CouponPrivilegeValue / 10
										}}</span>
										<span class="fs-24">折</span>
										<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
											item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
									</div>
								</div>
								<div class="right-box flex-s-c flex-1 pl-30 pr-20 pos-r">
									<div>
										<p class="fs-32 color-dark lh text-show-line-1 mb-10">{{ item.V_Name }}</p>
										<!--<p v-show="item.V_LimitMode === 0" class="fs-24 color-gray-light">全场通用</p>-->
										<!--<p v-show="item.V_LimitMode !== 0" class="fs-24 color-gray-light">{{ item.StoreNames }}{{ item.StoreNames?',':'' }}{{ item.ProductNames||item.ProductCategoryNames }}</p>-->
										<p class="fs-24 color-gray-light">{{ item.V_UseStartTime }}至{{ item.V_UseEndTime }}</p>
									</div>
									<van-radio checked-color="#24c373" :name="index" class="pr-20 flex-s-0" />
								</div>
							</div>
						</li>
					</ul>
				</van-radio-group>

				<div class="pd-24 flex-center">
					<van-button class="color-primary1 bg-white flex-1 br-44 mr-20" native-type="submit"
						@click="noUseCoupon">不使用优惠券</van-button>
					<van-button class="solid-btn flex-2 br-44 ml-20" native-type="submit" @click="choseCoupon">确定</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
import {
	GetProductBookData,
	GetCanBookRoomList,
	SubmitBookOrder,
	GetOrderBookInfo
} from 'api/teaHouse'
import { GetProductDataBySubmit } from 'api/product'
import { AddOrEditUserTempCarList } from 'api/member'
import { GetNowTime } from 'api/activity'
export default {
	components: {
		imgBox
	},
	data() {
		return {
			isEdit: false, // 是否编辑
			param: {
				orderId: '', // 订单ID
				type: '', // 0-再次预定;1-续单
				userCarListInput: {
					list: []
				}, // 购物车数据
				storeId: '', // 门店ID
				productId: '', // 商品ID
				roomNo: '', // 选中房间号
				roomName: '', // 选中房间名
				roomId: '', // 选中房间ID
				roomAll: [], // 总房间数
				SaleType: -1, // 售卖方式
				bookStartTime1: '请选择预定时间', // 默认最小入住时间显示用(由于传参需要加时分秒所以直接用参数上传过程会显示null)
				bookEndTime1: '请选择预定时间', // 默认最小离店时间显示用(由于传参需要加时分秒所以直接用参数上传过程会显示null)
				bookStartTime: '', // 入住时间传参用
				bookEndTime: '', // 离店时间传参用
				startWeek: '', // 入职周期界面显示
				endWeek: '', // 离店周期界面显示
				roomPrice: '', // 商品金额即房间金额
				orderPrice: '', // 订单金额
				userName: '', // 姓名
				userIdentityCard: '', // 身份证
				userTel: '', // 电话
				userCount: '', // 登记人数
				timeSelect: false, // 预计到店时间弹窗显示与否
				minHouse: '12', // 最早可办理入住时间几时(按每天12:00)
				minMinute: '', // 最早可办理入住时间几分
				isAheadTime: false, // 判断是否是今天下午超过12点预定订单
				estimateArrivalTime: '', // 预计到店时间
				orderRemark: '', // 入住信息留言
				userRemark: '', // 订单留言
				bookStoreId: 0,
			},
			orderData: { // 订单数据
				ProductBookSetting: {}, // 预定配置
				ProductModel: { // 商品信息
					ProductInfo: {},
				},
				StoreInfo: {}, // 门店信息
				imgList: [] // 所有商品图
			},
			ProductRoomList: [],
			isShowHouse: false, // 选择房间显示
			currentRoom: -1, // 当前选中房间
			isShowTime: false, //茶室选择时间显示
			color: '#16AD56',
			maxDate: new Date(), // 可选最大时间限制
			minDate: new Date(), // 可选最小时间限制
			//BookInfoTypesList: [{ // 入住信息配置用于显示哪些填和必填
			//	ID: 1,
			//	Name: '姓名',
			//	type: 'userName',
			//	userName: '',
			//	isShow: false,
			//	required: false
			//}, {
			//	ID: 2,
			//	Name: '手机号',
			//	type: 'userTel',
			//	userTel: '',
			//	isShow: false,
			//	required: false
			//}, {
			//	ID: 3,
			//	Name: '身份证',
			//	type: 'userIdentityCard',
			//	userIdentityCard: '',
			//	isShow: false,
			//	required: false
			//}, {
			//	ID: 4,
			//	Name: '人数',
			//	type: 'userCount',
			//	userCount: '',
			//	isShow: false,
			//	required: false
			//}, {
			//	ID: 5,
			//	Name: '预计时间到店',
			//	type: 'estimateArrivalTime',
			//	estimateArrivalTime: '',
			//	isShow: false,
			//	required: false
			//}, {
			//	ID: 6,
			//	Name: '备注',
			//	type: 'orderRemark',
			//	orderRemark: '',
			//	isShow: false, // 可填信息
			//	required: false // 必填信息
			//}],
			//obj: { // 各个可填信息对象
			//	estimateArrivalTime: {},
			//	orderRemark: {},
			//	userCount: {},
			//	userIdentityCard: {},
			//	userName: {},
			//	userTel: {},
			//},
			rzInfo: {}, // 获取续单
			roomRemark: '', //房间备注

			showCoupon: false, // 优惠券弹出层
			userCouponList: [], // 未使用
			userCouponListRadio: 0,
			changeList: [], // 可兑换
			changeListRadio: 0,
			userCouponNum: 0, // 可使用优惠券的数量
			couponValue: 0,
			BookDay: 0, //可提前预约天数
			classActive: 0,
			now: '',
			year: 0,
			date: '',
			dateList: [],
			timeArr: [],
			duration: 0,
			bookStartDate: '',
			bookEndDate: '',
			startIndex: -1, //开始下标
			endIndex: -1, //结束下标
			index1: 0, //每次变换的下标数
			tempStartTime: '', //临时开始时间
			tempEndTime: '', //临时结束时间
			tempStartDate: '', //临时开始日期(确认预约时赋值给bookStartDate,取消清空)
			tempEndDate: '', //临时结束日期
			isChooseTime: false, //是否选择了时间(用来判断关闭遮罩层没选时间清空)
			tempStartIndex: -1, //记录进来页面时数据,若没选择,赋值回去
			tempEndIndex: -1,
			minOrderPrice: 0, //优惠券最小使用金额
			CouponPrivilegeValue: '', //优惠券金额值
			MinNum: 1, //最小起订量
			nowTime: '',
		}
	},
	created() {
		// 门店ID
		this.param.storeId = this.$route.query.storeId
		// 商品ID
		this.param.productId = this.$route.query.productId
		this.param.bookStoreId = this.$route.query.bookStoreId
		// orderId是续单或再次预定需要获取入住信息用
		this.param.orderId = this.$route.query.orderId ? this.$route.query.orderId : 0
		// type 区分续单或再次预定
		this.param.type = this.$route.query.type ? this.$route.query.type : ''
		// 获取订单数据
		this.GetProductBookData()
		this.setInterval()
	},
	computed: {
		orderPrice() {
			let _totalPay = this.param.roomPrice * this.duration * 2 - this.couponValue
			return _totalPay
		},
	},
	mounted() {
		this.timeSlot(30)
	},
	methods: {
		timeSlot(step) {
			var date = new Date();
			date.setHours(0); // 时分秒设置从零点开始
			date.setSeconds(0);
			date.setUTCMinutes(0);

			var slotNum = (24 * 60) / step; // 算出多少个间隔
			for (var f = 0; f < slotNum; f++) {
				//  stepM * f = 24H*60M
				// this.arr.push(new Date(Number(date.getTime()) + Number(step*60*1000*f))) // 标准时间数组
				var time = new Date(
					Number(date.getTime()) + Number(step * 60 * 1000 * f)
				); // 获取：零点的时间 + 每次递增的时间
				var hour = "",
					sec = "";
				time.getHours() < 10
					? (hour = "0" + time.getHours())
					: (hour = time.getHours()); // 获取小时
				time.getMinutes() < 10
					? (sec = "0" + time.getMinutes())
					: (sec = time.getMinutes()); // 获取分钟
				this.timeArr.push({ time: hour + ":" + sec, index: f, });
			}
		},

		dateClick(item, num) {
			this.classActive = num
			var dateDiff = (new Date(this.now)).getTime() - (new Date(item.date)).getTime(); //时间差的毫秒数

			var leave1 = dateDiff / (24 * 3600 * 1000); //计算出相差天数
			this.index1 = this.index1 - 24 * 2 * leave1
			this.now = item.date
			this.timeArr.forEach((ele) => {
				ele.index = ele.index - 24 * 2 * leave1
				var time1 = new Date(this.now + ' ' + ele.time)
				if (new Date() > time1) {
					ele.state = true
				} else {
					ele.state = false
				}
			})
		},
		tabClickPop(item, num) {
			var number = num + this.index1
			if (this.startIndex === -1) {
				this.startIndex = number
				this.tempStartTime = item.time
				this.tempStartDate = this.now
				this.endIndex = number
				this.tempEndTime = item.time
				this.tempEndDate = this.now
			} else {
				if (this.startIndex === number) {
					this.startIndex = -1
					this.tempStartTime = ''
					this.tempStartDate = ''
					this.endIndex = -1
					this.tempEndTime = ''
					this.tempEndDate = ''
				} else if (this.startIndex > number) {
					this.startIndex = number
					this.tempStartTime = item.time
					this.tempStartDate = this.now
				} else {
					this.endIndex = number
					this.tempEndTime = item.time
					this.tempEndDate = this.now
				}
			}

			console.log(this.startIndex, this.timeArr, '进来')
		},
		setInterval() {
			var that = this;
			//当前时间
			GetNowTime().then(rsp => {
				if (rsp.State == 1) {
					that.nowTime = new Date(rsp.Data.replace(/-/g, '/')).getTime();
					that.interval = setInterval(e => {
						that.nowTime += 1000;
					}, 1000)
				}
			})
		},
		//获取临时购物车数据
		GetProductDataBySubmit() {
			const data = {}
			data.isTempCar = true,
				GetProductDataBySubmit(data).then(res => {
					if (res.Data.List && res.Data.List.length > 0) {
						const list = res.Data.List
						if (list[0].CarList) {
							this.serveList = list[0].CarList
						}
					}
					if (res.Data.CouponList && res.Data.CouponList.length > 0) {
						this.userCouponList = res.Data.CouponList
						this.userCouponList.forEach((ele) => {
							ele.V_UseStartTime = this.$utils.getNewData(ele.V_UseStartTime, 0)
							ele.V_UseEndTime = this.$utils.getNewData(ele.V_UseEndTime, 0)
						})
						this.userCouponNum = res.Data.CouponList.length;
					}
				})
		},
		goBack() {
			history.go(-2)
		},
		// 获取订单数据
		GetProductBookData() {
			const _this = this
			GetProductBookData({
				productId: _this.param.productId,
				storeId: _this.param.storeId,
			}).then(res => {
				if (res.State) {
					_this.BookDay = res.Data.ProductBookSetting.BookDay
					_this.orderData = res.Data
					_this.MinNum = res.Data.ProductModel.ProductInfo.MinNum
					_this.maxDate = new Date(res.Data.ProductBookSetting.Latest.split(' ')[0]) // 离店时间最大限制
					_this.orderData.imgList = res.Data.ProductModel.ProductInfo.ImageUrl.split(',') // 商品图片
					_this.param.roomPrice = res.Data.ProductModel.ProductInfo.V_GradePrice
					//_this.param.roomPrice = parseFloat(res.Data.ProductModel.ProductInfo.V_GradePrice *
					//		_this.$utils.getHours(_this.param.bookStartTime1, _this.param.bookEndTime1)
					//) // 商品金额即房间金额
					//_this.param.orderPrice = parseFloat(res.Data.ProductModel.ProductInfo.V_GradePrice *
					//		_this.$utils.getHours(_this.param.bookStartTime1, _this.param.bookEndTime1)
					//) // 订单金额
					_this.param.SaleType = res.Data.ProductBookSetting.SaleType // 时间类型(按天-按小时)

					//_this.BookInfoTypesList.map(function (item, index) { // 入住信息需填和必填筛选数组
					//	res.Data.ProductBookSetting.BookInfoTypes.split(",").map(function (item2,
					//		index2) {
					//		if (item.ID == item2) {
					//			item.isShow = true
					//			if (item.isShow) {
					//				res.Data.ProductBookSetting.BookInfoRequiredTypes.split(
					//					",").map(function (item2, index2) {
					//						if (item.ID == item2) {
					//							item.required = true
					//						}
					//					})
					//			}
					//		}
					//	})
					//})
					//_this.obj = _this.BookInfoTypesList.reduce((result, item) => { // 入住信息需填和必填筛选对象页面判断
					//	return {
					//		...result,
					//		[item.type]: item
					//	}
					//}, { })
					if (_this.param.orderId != '') {
						// 获取入住信息
						_this.GetOrderBookInfo()
					}
				}
			})
		},
		// 再次预定或者续单获取预约订单信息
		GetOrderBookInfo() {
			GetOrderBookInfo(this.param.orderId).then(res => {
				if (res.State) {
					//this.rzInfo = res.Data
					//this.param.userIdentityCard = res.Data.UserIdentityCard
					//this.param.userTel = res.Data.UserTel
					//this.param.userCount = res.Data.UserCount
					//this.param.orderRemark = res.Data.OrderUserRemark
				}
			})
		},
		// 获取房间
		GetCanBookRoomList() {
			const _this = this

			GetCanBookRoomList({
				saleType: 1,
				productId: _this.param.productId,
				storeId: _this.param.storeId,
				startTime: this.bookStartDate + ' ' + _this.param.bookStartTime1,
				endTime: this.bookEndDate + ' ' + _this.param.bookEndTime1,
			}).then(res => {
				if (res.State) {
					_this.ProductRoomList = res.Data
					_this.param.estimateArrivalTime = ''
					if (res.Data) {
						_this.param.roomName = res.Data[0].Name
						_this.param.roomNo = res.Data[0].RoomNo
						_this.param.roomId = res.Data[0].ID
						const _obj = {}
						_obj.ProductId = this.param.productId
						_obj.Amount = this.duration * 2
						_obj.SkuId = this.orderData.ProductModel.ProductInfo.ProductSkuList[0].ID
						_obj.StoreId = this.param.storeId
						_obj.V_GradePrice = this.orderData.ProductModel.ProductInfo.V_GradePrice
						this.param.userCarListInput.list.push(_obj)
						if (_obj.Amount > 0) {
							AddOrEditUserTempCarList({ list: this.param.userCarListInput.list }).then(res => {
								if (res.Data) {
									this.GetProductDataBySubmit()
								}
							})
						}
					} else {
						this.$toast('该时间段暂无房间选择')
					}
				} else {
					this.$toast(res.Msg)
				}
			})
		},
		// 显示选择房间弹窗
		showHouse() {
			console.log(this.ProductRoomList, "房间列表")
			if (this.ProductRoomList.length == 0) {
				this.$toast('该时间段暂无房间选择')
				return
			}
			this.isShowHouse = true
		},
		// 选择房间
		roomChange(item) {
			const _this = this
			this.roomRemark = item.Remark
			// 选择单间房间
			if (this.param.roomId != item.ID) {
				this.ProductRoomList.map((item, index) => item.flag = false) // 重置
				this.ProductRoomList.map(function (item2, index2) {
					if (item2.ID == item.ID) {
						item2.flag = true
						_this.param.roomAll.push(item)
					}
				})
				this.param.roomId = item.ID
				this.param.roomNo = item.RoomNo
				this.param.roomName = item.Name
				this.isShowHouse = false
				this.param.userCarListInput.list = []
				const _obj = {}
				_obj.ProductId = this.param.productId
				_obj.Amount = this.duration * 2
				_obj.SkuId = this.orderData.ProductModel.ProductInfo.ProductSkuList[0].ID
				_obj.StoreId = this.param.storeId
				_obj.V_GradePrice = this.orderData.ProductModel.ProductInfo.V_GradePrice
				this.param.userCarListInput.list.push(_obj)
				if (_obj.Amount > 0) {
					AddOrEditUserTempCarList({ list: this.param.userCarListInput.list }).then(res => {
						if (res.Data) {
							this.GetProductDataBySubmit()
						}
					})
				} else {
					this.$toast("请选择服务项目")
				}
			}
		},

		showTime() {
			this.dateList = []
			if (this.orderData.ProductBookSetting.SaleType == 1) {
				this.classActive = 0
				this.isShowTime = true
				var now = new Date();
				this.tempStartIndex = this.startIndex
				this.tempEndIndex = this.endIndex
				console.log(this.startIndex, this.endIndex, this.index1, "index")
				this.year = now.getFullYear()
				var month = now.getMonth() + 1
				var strDate = now.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				this.now = now.getFullYear() + '-' + month + '-' + strDate
				this.timeArr.forEach((ele) => {
					var time1 = new Date(this.now + ' ' + ele.time)
					if (new Date() > time1) {
						ele.state = true
					} else {
						ele.state = false
					}
				})
				const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				for (var i = 0; i <= this.BookDay; i++) {
					let tomorrow = new Date(now);
					tomorrow.setTime(tomorrow.getTime() + 24 * 60 * 60 * 1000 * i);
					const _obj = {}
					_obj.zhouji = weekDay[tomorrow.getDay()]
					var y = tomorrow.getFullYear()
					var m = tomorrow.getMonth() + 1
					var d = tomorrow.getDate()
					if (m >= 1 && m <= 9) {
						m = "0" + m;
					}
					if (d >= 0 && d <= 9) {
						d = "0" + d;
					}
					_obj.dateStr = m + '.' + d
					_obj.date = y + '-' + m + '-' + d
					this.dateList.push(_obj)
				}
			}
		},
		// 预约日期自定义
		formatter(day) {
			if (day.type === 'start') {
				day.bottomInfo = '入住'
			} else if (day.type === 'end') {
				day.bottomInfo = '离店'
			}
			return day
		},
		// 关闭日期弹窗
		cancleDate() {
			for (var i = 0; i < this.timeArr.length; i++) {
				this.timeArr[i].index = i
			}
			this.index1 = 0
			if (this.tempEndIndex !== this.endIndex || this.tempStartIndex !== this.startIndex) {
				this.startIndex = this.tempStartIndex
				this.endIndex = this.tempEndIndex
			}
			console.log(this.startIndex, this.endIndex, this.isChooseTime, "重置2")
			if (!this.isChooseTime) {
				this.startIndex = -1
				this.endIndex = -1
				this.tempStartDate = ''
				this.tempEndDate = ''
			}
		},
		// 关闭日期弹窗
		resetDate() {
			this.param.bookStartTime1 = this.tempStartTime
			this.param.bookEndTime1 = this.tempEndTime
			this.bookStartDate = this.tempStartDate
			this.bookEndDate = this.tempEndDate
			this.tempStartIndex = this.startIndex
			this.tempEndIndex = this.endIndex
			if (this.param.bookStartTime1 === this.param.bookEndTime1 && this.bookStartDate === this.bookEndDate) {
				this.$toast('请选择结束时间')
				return
			}
			var dateBegin = new Date(this.bookStartDate + ' ' + this.param.bookStartTime1);
			var dateEnd = new Date(this.bookEndDate + ' ' + this.param.bookEndTime1);
			var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
			var leave1 = dateDiff % (24 * 3600 * 1000); //计算出相差天数
			if (dateDiff) {
				this.duration = Math.abs(dateDiff / (3600 * 1000)); //计算出小时数
			} else {
				this.duration = 0
			}
			this.isShowTime = false
			if (this.param.bookStartTime1 !== '') {
				this.isChooseTime = true
				this.GetCanBookRoomList()
			}
			setTimeout(() => {
				if (this.orderPrice < this.minOrderPrice) {
					this.userCouponListRadio = 0
					this.minOrderPrice = 0
					this.changeListRadio = 0
					this.CouponPrivilegeValue = 0
					this.couponValue = 0
					this.param.CouponDetailId = 0
					this.param.CouponId = 0
				}
			}, 500)
			this.noUseCoupon()
		},
		// 当预计到店时间值变化时触发
		changeSelect(picker) {
			let startIndexes = picker.getIndexes()
			let startTime = picker.getValues()
			if (startIndexes[0] != 0) {
				this.param.minMinute = ''
			} else {
				this.param.minMinute = (this.orderData.ProductBookSetting.LeadTime % 60).toString()
			}
		},
		// 选中预计到店时间
		confirmTimeSelect(val) {
			this.param.estimateArrivalTime = val
			this.param.timeSelect = false
		},
		// 点击取消预计到店时间按钮时触发
		cancelTimeSelect() {
			this.param.timeSelect = false
		},
		// 提交订单
		submitOrder() {
			console.log(this.MinNum, "666")
			if (this.tempEndIndex - this.tempStartIndex < this.MinNum) {
				const total = this.MinNum * 0.5
				this.$toast("起订量为" + total + "小时,请重新选择时间")
				this.startIndex = -1
				this.endIndex = -1
				this.param.roomNo = ''
				this.param.roomId = ''
				return
			}
			if (this.ProductRoomList.length == 0) {
				this.$toast('该时间段暂无房间选择')
				return
			}
			if (this.ProductRoomList.length != 0 && this.param.roomNo == '') {
				this.$toast('请选择房间')
				return
			}

			//if (this.obj.userIdentityCard.required && this.param.userIdentityCard == '') {
			//	this.$toast('请输入身份证号')
			//	return
			//} else {
			//	if (this.obj.userIdentityCard.required && (this.param.userIdentityCard.length < 18 || !(
			//		/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.param
			//			.userIdentityCard)))) {
			//		this.$toast('请输入正确身份证号')
			//		return
			//	}
			//}
			//if (this.obj.userIdentityCard.userTel && this.param.userTel == '') {
			//	this.$toast('请输入联系电话')
			//	return
			//} else {
			//	if (this.param.userTel < 11 || !(/^1[23456789]\d{9}$/.test(this.param.userTel))) {
			//		this.$toast('请输入正确联系电话')
			//		return
			//	}
			//}
			//if (this.obj.userCount.required && this.param.userCount == '') {
			//	this.$toast('请输入到店人数')
			//	return
			//}
			//if (this.obj.estimateArrivalTime.required && this.param.estimateArrivalTime == '') {
			//	this.$toast('请输入预计到店时间')
			//	return
			//}
			//if (this.obj.orderRemark.required && this.param.orderRemark == '') {
			//	this.$toast('请输入备注')
			//	return
			//}

			this.param.bookStartTime = this.bookStartDate + ' ' + this.param.bookStartTime1
			this.param.bookEndTime = this.bookEndDate + ' ' + this.param.bookEndTime1

			this.param.orderPrice = this.orderPrice
			if (this.orderPrice < 0) {
				this.$toast('订单金额需大于等于0')
			} else {
				SubmitBookOrder(this.param).then(res => {
					if (res.Data) {
						if (res.Data.PriceSum === 0) {
							this.$router.push({
								path: 'teaOrderList',
								query: {
									saleType: 1
								}
							})
						} else {
							if (this.param.SaleType === 0) {
								window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data
									.OrderId + '&&singleflag=1&&isBookOrder=1'
							} else {
								window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data
									.OrderId + '&&singleflag=1&&isBookOrder=2'
							}
						}
					}
				})
			}
		},
		// 数据整理
		dataChange(options = {}) {
			let keys = Object.keys(options)
			let str = ''
			keys.map((item, index) => {
				str += `${index == 0 ? '' : '&'}${item}=${options[item]}`
			})
			return str
		},
		// 选择优惠券
		openCouponList() {
			this.showCoupon = true
			this.focusStatus = false
			if (this.price === '') {
				Toast({
					message: '请先输入订单金额'
				})
				this.focusStatus = true
				return
			}
		},
		goCoupon() {
			this.showCoupon = true
		},

		// 不使用优惠券
		noUseCoupon() {
			this.userCouponListRadio = 0
			this.minOrderPrice = 0
			this.changeListRadio = 0
			this.CouponPrivilegeValue = 0
			this.couponValue = 0
			this.param.CouponDetailId = 0
			this.param.CouponId = 0
			this.showCoupon = false
		},
		// 确定选择优惠券
		choseCoupon() {
			this.showCoupon = false
			const list = this.active ? this.changeList : this.userCouponList
			const radio = this.active ? this.changeListRadio : this.userCouponListRadio
			if (radio >= 0) {
				console.log(radio)
				if (list[radio].V_PrivilegeWay === 0) {
					this.CouponPrivilegeValue = ((1 - list[radio].CouponPrivilegeValue / 100) * this.price).toFixed(2)
				} else {
					this.CouponPrivilegeValue = list[radio].CouponPrivilegeValue
				}

				this.couponValue = this.CouponPrivilegeValue
				console.log(this.param.roomPrice, this.duration, "金额")
				if (list[radio].V_PrivilegeWay === 4 && list[radio].CouponPrivilegeValue > this.param.roomPrice * this.duration * 2) {
					this.couponValue = this.param.roomPrice * this.duration * 2
				}
				this.minOrderPrice = list[radio].V_OrderPrice || 0
				this.param.CouponDetailId = list[radio].DetailId
				this.param.CouponId = list[radio].ID
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.order-bg {
	height: 414px;
	background: linear-gradient(0, #f5f5f5 0%, rgba(22, 173, 86, 0) 100%);
	@include bg-primary;
}

.bb-l {
	border-bottom: 1px solid #f5f5f5;
}

.min-w {
	min-width: 194px;
}

.arrow:after {
	right: 11px;
	top: 39%;
	color: #CBCBCB;
}

.dvt {
	align-items: flex-end;
}

.line::before {
	content: '';
	width: 26px;
	height: 1px;
	position: absolute;
	left: -26px;
	top: 50%;
	transform: translateY(-50%);
	@include bg-primary;
}

.line::after {
	content: '';
	width: 26px;
	height: 1px;
	position: absolute;
	right: -26px;
	top: 50%;
	transform: translateY(-50%);
	@include bg-primary;
}

/deep/.van-cell {
	background-color: #F7F7F7;
}

.active {
	@include color-primary;
	background: rgba($color: $param15, $alpha: 0.1);
}

.bottom-box {
	position: relative;
	background: $colorF;
	height: 120px;
	z-index: 2;
	box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn {
	width: 220px;
	padding: 0;
	line-height: 80px;
	border-radius: 40px;
	text-align: center;
}

/deep/.van-calendar__header-title {
	font-size: 16px;
	color: #323232;
}

/deep/.van-calendar__footer {
	padding: 0;
	box-shadow: 0px -1px 70px 0px rgba(0, 0, 0, 0.08);
}

/deep/.van-calendar__header {
	box-shadow: none;
}

/deep/.van-calendar__popup .van-popup__close-icon {
	display: none;
}

.tag::after {
	content: '';
	width: 1px;
	height: 20px;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: #999999;
}

.tag:last-child::after {
	width: 0;
}

/deep/.van-picker__cancel {
	@include color-primary;
}

/deep/.van-picker__confirm {
	@include color-primary;
}

.travel {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 优惠券列表 */
.coupon-list {
	position: relative;
	max-height: 55vh;
	overflow: scroll;

	.coupon-item {
		.item {
			width: 686px;
			height: 180px;
			background-size: 100% 100%;

			.left-box {
				width: 210px;
				height: 100%;
				color: #FDE8AE;
			}
		}
	}
}

.dateTimeList {
	height: 75vh;
	width: 100%;
	border-radius: 32px 32px 0px 0px;
}

.timeList {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-top: 326px;
}

.times {
	width: 158px;
	height: 78px;
	line-height: 78px;
	background: #F4F5F6;
	border-radius: 8px;
	color: #333;
	margin-bottom: 24px;
	text-align: center;
	font-size: 28px;
	margin-right: 3%;
}

.times:nth-child(4n) {
	margin-right: 0;
}

.actives {
	background: $primary15;
	color: #fff;
}

.dateList {
	overflow: scroll;
	display: flex;
}

.dateList:-webkit-scrollbar {
	width: 0 !important;
}

.dateList::-webkit-scrollbar {
	width: 0 !important;
	height: 0;
}

.dates {
	width: 112px;
	height: 144px;
	border-radius: 28px;
	border: 2px solid #EAEAEA;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right: 24px;
	padding: 0 24px;
}

.dateActive {
	background: $primary15;
	border: 2px solid $primary15;
	color: #fff;
}

.submitBtn {
	position: fixed;
	bottom: 0;
	background: #fff;
	width: 100%;
	text-align: center;
}

.yybtn {
	width: 670px;
	height: 88px;
	border-radius: 44px;
	margin: 24px auto;
}

.mb-144 {
	margin-bottom: 144px;
}

.bookDayList {
	position: fixed;
	background: #fff;
	width: 100%;
	border-bottom: 1px solid #EBEBEB;
	border-radius: 32px 32px 0px 0px;
}

.actives1 {
	background: #F4F5F6;
	color: #999;
}
</style>
